/*
 * Copyright (C) 2022 KylinSoft Co., Ltd.
 *
 * This program is free software: you can redistribute it and/or modify it under
 * the terms of the GNU General Public License as published by the Free Software
 * Foundation, either version 3 of the License, or (at your option) any later
 * version.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License along with
 * this program. If not, see <https://www.gnu.org/licenses/>.
 */

import QtQuick 2.0
import QtQuick.Window 2.12
import QtQuick.Controls 2.0
import org.ukui.tablet 1.0

Window {
    width: 800; height: 600
    visible: true

    ButtonGroup {
        id: buttonGroup
        exclusive: true
        buttons: repeater.children
    }

    Row {
        id: category
        spacing: 10
        width: 1000; height: 100
        Repeater {
            id: repeater
            model: modelManager.categoryModel
            delegate:  Button {
                id: button
                width: 100; height: 60
                checkable: true
                autoExclusive:true
                background: Rectangle {
                    width: 100; height: 60
                    color: button.checked ? "green" : "red"
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            button.checked = !button.checked
                        }
                    }
                }
            }
        }
    }

    ListView {
        id: listView
        width: parent.width
        height: 400
        anchors.top: category.bottom
        orientation: ListView.Horizontal
        model: modelManager.categoryItemsModel
        delegate: GridView {
            width: listView.width; height: listView.height
            cellWidth: 100; cellHeight: 100
            model: modelData
            delegate: AppIcon {
                width: 80; height: 80
                iconWidth: 80;
                icon: "file://" + modelData.icon
                iconState: modelData.state
                Component.onCompleted: {
                    console.log("icon ", modelData.icon)
                }
            }
        }
    }
}
